@import (reference) "function.less";

//全局父容器样式变量
@page-width:1070px;
//@page-width:1200px;
@page-background:#fff;

//页头变量
@header-height:120px;
@header-background:#fff;
@header-color:#333;
.test{
	background:#3F3F3F;
}

//页底变量
@footer-height:100px;
@footer-background:#eee;

//导航变量
@nav-height:50px;
@nav-background:#669933;

//主体样式
@main-height:300px;
@main-background:#fff;

//左右侧通用属性
@lr-height:300px;

//左侧属性
@left-width:250px;
@left-background:red;
//右侧属性
@right-width:300px;
@right-background:red;
//center
//@center-width:@page-width - @left-width - @right-width - 20px;	//适用于三栏1200宽
@center-width:@page-width - @right-width - 10px;	//适用于两栏980宽

//重置样式
.hi121-reset;

//*****************************************************************************************

h1{font-size:22px;}
h2{font-size:18px;}
body{color:#333;font: 0.75em/1.75em 'Arial', Helvetica, Arial, "Microsoft Yahei", sans-serif;font-size:14px;}


//*****************************************************************************************

//整体宽度
.layui-container,.hi-container,.page{
	width:@page-width;
	background:@page-background;
	margin:0px auto;
}

.hi-header{
	height:@header-height;
	background:@header-background;
	color:@header-color;
	display:flex;
	.hi-h{padding:15px 10px;box-sizing: border-box;}
	.hi-h-no-1{width:25%}
	.hi-h-no-2{width:50%}
	.hi-h-no-3{width:25%}
	.logo{
		padding-top:20px;
	}
	.title{
		padding-top:10px;height:30px;line-height:30px;overflow:hidden;
	}
}

.hi-breadcrumb{
	height:50px;line-height:50px;padding:0 10px;
}

.hi-nav{
	height:@nav-height;
	background:@nav-background;
	ul{
		display:flex;
		li{padding:0px 10px;line-height:50px;}
	}
}

.hi-main{
	min-height:@main-height;
	background:@main-background;
	display:flex;
	box-sizing: border-box;
	justify-content: space-between;	//两端对齐
	//justify-content: space-around;	//等分对齐
	flex-wrap:wrap;
}

.hi-center{
	width:@center-width;
	//background:greenyellow;
	box-sizing: border-box;
	margin-top:10px;
}

.hi-left{
	width:@left-width;background:@left-background;height:@lr-height;box-sizing: border-box;
	margin-top:10px;
}

.hi-right{
	width:@right-width;background:@right-background;height:@lr-height;box-sizing: border-box;
	margin-top:10px;
}


.hi-footer{
	margin-top:10px;
	height:@footer-height;
	background:@footer-background;
}


//*********************************************************************************************

.hi-block{
	display:flex; flex-wrap:wrap;
	.layui-card{width:50%}
	.layui-card-body{
		li{overflow:hidden;line-height:30px;height:30px;span{float:right;color:#aaa}}
	}
}

.hi-right{
	.hi-card{
		width:100%;
		.hi-card-body{
			li{overflow:hidden;line-height:30px;height:30px;}
		}
	}

}

.title-time{font-size:12px;text-align:right}

.hi-list-li{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;	//两端对齐
	//background:red;
	margin-bottom:15px;

	.hi-list-info{
		width:100px;color:#777;flex-grow:1;box-sizing: border-box;
		//background:red;
		.hi-list-title{
			font-size:20px;height:45px;line-height:45px;
			display:flex;
			justify-content: space-between;	//两端对齐
			.title-link{width:90%;overflow:hidden;}
			//.title-time{width:20%;color:#bbb}
		}
		.hi-list-text{}
	}
	.hi-list-thumb{
		width:180px;height:120px;box-sizing: border-box;
		img{width:100%;height:120px;}
		margin-right:10px;
	}
}

.em{width:100%;color:#999;padding-top:5px;span{padding-right:20px;display:inline-block}}

.hi-search{
	display:flex;
	padding-top:15px;
	.hi-input{width:80%}
	.hi-btn{width:20%}
}
.hi-search-hot{line-height:35px;line-height:35px;font-size:12px;span{padding:0 5px;} a{color:#777}}

//***********************************重写layui样式******************************************************

//已选中导航
.layui-bg-cyan {
	background-color: @nav-background!important;
}
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {background:@header-background}
